<div id="pm_settings">
    <div class="settings">
        <p class="alert alert-info" ng-if="mobileMode" translate-context="Info" translate-comment="responsiveness info" translate>This page is only available on larger resolution devices. If you are on a  phone, try landscape mode, or visit on a computer instead.</p>
        <restore-administrator-panel ng-if="keyStatus === 2"></restore-administrator-panel>

        <div class="row" ng-show="organization.HasKeys === 0">
            <section class="setting pm_form full">
                <header-block class="settingsUsers-header-signatures">
                    <h2
                        class="settingsUsers-title-signatures"
                        translate
                        translate-context="Title">Multi-User Support</h2>
                </header-block>
                <p class="alert alert-info" translate-context="Info" translate>Create and manage sub-accounts and assign them email addresses on your custom domain.</p>
                <p>
                    <member-edit-btn
                        data-action="enableSupport"
                        class="pm_button primary"
                        data-model="member"></member-edit-btn>

                    <a href="https://protonmail.com/support/knowledge-base/business/" target="_blank" class="pm_button link" translate-context="Link" translate>Learn more</a>
                </p>
            </section>
        </div>
        <div class="row" id="settingsOrganization" ng-show="organization.HasKeys === 1">
            <section class="setting pm_form full">
                <header-block class="settingsUsers-header-organization">
                    <h2
                        class="settingsUsers-title-organization"
                        translate
                        translate-context="Title">Organization</h2>
                </header-block>

                <div class="pm_grid no-margin">
                    <div class="col-1-2">
                        <div class="clearfix">
                            <organization-form-name></organization-form-name>
                        </div>
                    </div>
                    <div class="col-1-2">
                        <div class="clearfix">
                            <table class="usersTable" id="usersTable">
                                <tbody>
                                    <tr>
                                        <th scope="row">
                                            <span translate-context="Info"  translate>Number of users</span>
                                        </th>
                                        <td>
                                            <span class="nowrap">
                                                {{ organization.UsedMembers }}
                                                <span translate-context="Info" translate>of</span>
                                                {{ organization.MaxMembers }}
                                            </span>
                                            <span translate-context="Info" translate>used</span>
                                        </td>
                                        <td class="text-right">
                                            <span hide-upgrade="member">
                                                <a ui-sref="secured.dashboard({ scroll: true })" class="pm_button link" translate-context="Action" translate-comment="link to dashboard" translate>Upgrade</a>
                                            </span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row">
                                            <span translate translate-context="Info">Organization storage</span>
                                        </th>
                                        <td>
                                            <span class="nowrap">{{ organization.MaxSpace | humanSize }}</span>
                                        </td>
                                        <td class="text-right">
                                            <span hide-upgrade="space">
                                                <a ui-sref="secured.dashboard({ scroll: true })" class="pm_button link" translate-context="Action" translate-comment="link to dashboard" translate>Upgrade</a>
                                            </span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row">
                                            <span translate-context="Info"  translate>Available VPN connections</span>
                                        </th>
                                        <td>
                                            <span translate-context="Info" translate>{{ organization.MaxVPN - organization.UsedVPN }} </span>
                                        </td>
                                        <td class="text-right">
                                            <span hide-upgrade="member">
                                                <a ui-sref="secured.dashboard({ scroll: true })" class="pm_button link" translate-context="Action" translate-comment="link to dashboard" translate>Upgrade</a>
                                            </span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row" colspan="2">
                                            <span class="margin-right" translate-context="Info"  translate>Available domains</span>

                                            <div class="margin-left" >
                                                   <span class="ellipsis usersTable-domainList" ng-repeat="domain in domains" title="{{ domain.DomainName }}">
                                                        {{ domain.DomainName }}{{ $last ? '' : ', ' }}
                                                 </span>
                                             </div>
                                        </th>
                                        <td class="text-right">
                                            <a ui-sref="secured.domains" class="pm_button link" translate-context="Action" translate-comment="link to domains" translate>Manage</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        <div class="row" id="settingsMembers">
            <section class="setting pm_form full">

                <header-block class="settingsUsers-header-signatures">
                    <h2
                        class="settingsUsers-title-signatures"
                        translate
                        translate-context="Title">Addresses / Users</h2>

                    <small class="settingsUsers-details-signatures" ng-if="isAdmin">
                        {{ organization.UsedAddresses }} / {{ organization.MaxAddresses }} <span
                            translate-comment="how many addresses are in use"
                            translate-context="Info"
                            translate>addresses used.</span>
                        <a
                            class="settingsUsers-link-signatures"
                            ui-sref="secured.dashboard({scroll: true})"
                            data-hide-upgrade="address"
                            translate-context="Action"
                            translate-comment="link to dashboard page" translate>Upgrade your plan</a>
                    </small>
                </header-block>

                <p>
                    <member-edit-btn
                        data-action="add"
                        class="pm_button primary"></member-edit-btn>
                </p>

                <div class="pm_table visibleOverflow">

                    <table class="members-table bordered absorbing withDropDown">
                        <thead>
                            <tr>
                                <th scope="col" translate-context="Title" translate-comment="table heading" translate>Name</th>
                                <th scope="col" class="absorbing-column" translate-context="Title" translate-comment="table heading" translate>Addresses</th>
                                <th scope="col" ng-if="organization.HasKeys === 1">
                                    <span translate-context="Title" translate-comment="table heading" translate>Role</span>
                                    <a href="https://protonmail.com/support/knowledge-base/member-roles/" target="_blank">
                                        <i class="fa fa-info-circle"></i>
                                    </a>
                                </th>
                                <th scope="col" ng-if="organization.HasKeys === 1">
                                    <span translate-context="Title" translate-comment="table heading" translate>Private</span>
                                    <a href="https://protonmail.com/support/knowledge-base/private-members/" target="_blank">
                                        <i class="fa fa-info-circle"></i>
                                    </a>
                                </th>
                                <th scope="col"></th>
                                <th scope="col" translate-context="Title" translate-comment="table heading" translate>Actions</th>
                            </tr>
                        </thead>
                        <tbody class="members-table-tbody">
                            <tr ng-repeat-start="member in members track by member.ID">
                                <td>
                                    <span ng-bind="member.Name"></span>
                                </td>
                                <td>
                                    <span>{{ member.Addresses[0].Email }}</span>
                                    <toggle-expand ng-if="member.Addresses.length > 1" class="autoHeight" data-model="member" data-text="+ {{ member.Addresses.length - 1 }}"></toggle-expand>
                                    <toggle-expand ng-if="member.Addresses.length === 1" class="autoHeight" data-model="member"></toggle-expand>
                                </td>
                                <td ng-if="organization.HasKeys === 1">
                                    <span ng-show="member.Subscriber" translate-context="Info"  translate>Primary Admin</span>
                                    <span ng-hide="member.Subscriber" ng-bind="roles[member.Role]"></span>
                                </td>
                                <td ng-if="organization.HasKeys === 1">
                                    <span
                                        ng-show="member.Private === 1"
                                        translate-context="Option"
                                        translate>Yes</span>
                                    <span
                                        ng-hide="member.Private === 1"
                                        translate-context="Option"
                                        translate>No</span>
                                </td>
                                <td>
                                    <div class="members-table-usage">
                                        <i class="fa fa-hdd-o"></i>
                                        {{ member.UsedSpace | humanSize:true:'GB' }} / {{ member.MaxSpace | humanSize:false:'GB' }}
                                        <span translate-context="space used out of total space allowed for a member" translate>Used</span>
                                    </div>
                                    <div class="members-table-usage">
                                        <i class="fa fa-shield"></i>
                                        {{ member.MaxVPN  }}
                                        <span translate-comment="vpn connection used"  translate-context="How many connections" translate>VPN Connections</span>
                                    </div>
                                </td>
                                <td>
                                    <div class="pm_buttons">
                                        <address-btn-actions
                                            data-model2="member"
                                            data-action="add"
                                            class="pm_buttons pm_button primary"></address-btn-actions>

                                        <a class="pm_buttons pm_button primary pm_trigger fa fa-angle-down" ng-if="organization.HasKeys === 1" dropdown></a>
                                        <div class="pm_dropdown right">

                                            <member-edit-btn
                                                ng-if="!member.Self && member.Type === 1"
                                                data-action="destroy"
                                                class="pm_button link text-red"
                                                data-model="member"></member-edit-btn>

                                            <member-edit-btn
                                                ng-if="!member.Self && member.Type === 0"
                                                data-action="remove"
                                                class="pm_button link"
                                                data-model="member"></member-edit-btn>

                                            <member-edit-btn
                                                ng-if="organization.HasKeys === 1"
                                                class="pm_button link"
                                                data-model="member"></member-edit-btn>

                                            <member-edit-btn
                                                ng-if="member.Role === 1"
                                                data-action="makeAdmin"
                                                class="pm_button link"
                                                data-model="member"></member-edit-btn>

                                            <member-edit-btn
                                                ng-if="!member.Self && member.Role === 2"
                                                data-action="revokeAdmin"
                                                class="pm_button link"
                                                data-model="member"></member-edit-btn>

                                            <member-edit-btn
                                                ng-if="!member.Self && member.Private === 0 && member.Keys.length  && member.Addresses.length"
                                                data-action="login"
                                                class="pm_button link"
                                                data-model="member"></member-edit-btn>

                                            <member-edit-btn
                                                ng-if="member.Private === 0"
                                                data-action="makePrivate"
                                                class="pm_button link"
                                                data-model="member"></member-edit-btn>

                                            <member-edit-btn
                                                ng-if="!member.Self"
                                                data-action="revokeSessions"
                                                class="pm_button link"
                                                data-model="member"></member-edit-btn>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr class="hasTable member-table-addresses-wrapper" ng-repeat-end ng-if="member.toggle === true && member.Addresses.length > 0">
                                <td colspan="6">
                                    <div class="pm_table member-table-addresses-pmTable">
                                        <table class="member-table-addresses absorbing">
                                            <tbody>
                                                <tr ng-repeat="address in member.Addresses | orderBy: ['!Status','Order'] track by address.ID">
                                                    <td ng-bind="address.Email"></td>
                                                    <td class="absorbing-column">
                                                        <span class="pm_badge success" ng-show="address.Status === 1 && address.Receive === 1" translate translate-comment="address state badge" translate-context="Address state badge">Enabled</span>
                                                        <span class="pm_badge error" ng-show="address.Status === 0"  translate translate-comment="address state badge" translate-context="Address state badge">Disabled</span>
                                                        <span class="pm_badge warning" ng-show="address.HasKeys === 0"  translate translate-comment="address state badge" translate-context="Address state badge">Missing keys</span>
                                                        <span class="pm_badge warning" ng-show="address.DomainID === null"  translate translate-comment="address s tate badge" translate-context="Address state badge">Orphan</span>
                                                        <span class="pm_badge primary" ng-show="address.isDefault" translate translate translate-comment="address state badge" translate-context="Address state badge">Default</span>
                                                    </td>
                                                    <td class="text-right">

                                                        <address-btn-actions
                                                            data-model="address"
                                                            data-model2="member"
                                                            data-action="generate"
                                                            ng-if="((isAdmin && member.Private !== 1) || (member.Private === 1 && member.Self === 1)) && address.HasKeys === 0"
                                                            class="pm_button link"></address-btn-actions>

                                                        <address-btn-actions
                                                            data-model="address"
                                                            data-action="enable"
                                                            ng-if="isAdmin && address.Status === 0 && address.Type !== 1 && address.Type !== 4"
                                                            class="pm_button link"></address-btn-actions>

                                                        <address-btn-actions
                                                            data-model="address"
                                                            data-action="disable"
                                                            ng-if="isAdmin && address.Status === 1 && address.Type !== 1 && address.Type !== 4"
                                                            class="pm_button link"></address-btn-actions>

                                                        <address-btn-actions
                                                            data-model="address"
                                                            data-action="remove"
                                                            ng-if="address.Type === 3"
                                                            class="pm_button link"></address-btn-actions>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <p class="help" translate-context="Help" translate>To edit the signature(s) and reorder your addresses, <a ui-sref="secured.account">go to account</a></p>
            </section>
        </div>

        <div class="row" id="securityOrganization" ng-if="organization.HasKeys === 1">
            <section class="setting pm_form full">

                <header-block class="settingsUsers-header-security">
                    <h2
                        class="settingsUsers-title-security"
                        translate
                        translate-context="Title">Security</h2>
                </header-block>

                <div class="pm_grid">
                    <div class="col-2-3">
                        <p ng-if="keyStatus === 0">
                            <organization-btn-actions
                                data-action="changePassword"
                                class="pm_button primary disabled-if-network-activity"></organization-btn-actions>

                            <organization-btn-actions
                                data-action="changeKeys"
                                class="pm_button primary disabled-if-network-activity"></organization-btn-actions>

                            <a class="pm_button link" href="https://protonmail.com/support/knowledge-base/organization-key/" target="_blank" translate translate-context="Link">Learn more</a>
                        </p>
                        <div ng-if="keyStatus === 1">
                            <p class="alert alert-warning" translate translate-context="Info">You must activate your organization keys. Without activation you will not be able to create new users, add addresses to existing users, or access non-private user accounts.</p>
                            <p>
                                <organization-btn-actions
                                    data-action="activateKeys"
                                    class="pm_button primary disabled-if-network-activity"></organization-btn-actions>
                            </p>
                        </div>
                        <div ng-if="keyStatus === 2">
                            <p class="alert alert-danger" translate translate-context="Info">You have lost access to your organization keys. Without restoration you will not be able to create new users, add addresses to existing users, or access non-private user accounts.</p>
                            <p>
                                <organization-btn-actions
                                    data-action="resetKeys"
                                    class="pm_button disabled-if-network-activity"></organization-btn-actions>

                                <organization-btn-actions
                                    data-action="restoreKeys"
                                    class="pm_button primary disabled-if-network-activity"></organization-btn-actions>
                            </p>
                        </div>
                        <div class="pm_table" ng-if="keyStatus === 0">
                            <table class="bordered absorbing">
                                <thead>
                                    <tr>
                                        <th scope="col">
                                            <span translate-context="Title" translate-comment="table heading" translate>Organization Key Fingerprint</span>
                                            <a href="https://protonmail.com/support/knowledge-base/organization-key/" target="_blank">
                                                <i class="fa fa-info-circle"></i>
                                            </a>
                                        </th>
                                        <th scope="col" translate-context="Title" translate-comment="table heading" translate>Key type</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <code>{{ organizationKeyInfo.fingerprint }}</code>
                                        </td>
                                        <td>{{ organizationKeyType }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
